<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- 引入 Bootstrap -->
<link href="../../style/bootstrap-4.6.0-dist/css/bootstrap.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
    h1{
        text-align: center;
    }
    #checkAll, .check {
        width: 20px;
        height: 20px;
    }
    #add_btn {
        background: #009688;
        height: 43px;
        width: 82px;
        border-radius: 10px;
        cursor: pointer;
        color: #FBFBFB;
        margin-right: 10px;
        margin-left: 20px;
    }
    #del_btn {
        background: #e4606d;
        height: 43px;
        width: 82px;
        border-radius: 10px;
        cursor: pointer;
        color: #FBFBFB;
        margin-top: 10px;
        margin-left: 20px;
    }
    /*搜索框1*/
    .bar1 {
        width: 455px;
        height: 40px;
        display: inline-block;
        margin-left: 20px;
    }

    #itemsName{
        width: 285px;
        height: 40px;
        color: #0f6674;
        font-weight: bold;
        border-radius: 7px;
    }

    #sous_btn {
        display: inline-block;
        width: 40px;
        height: 40px;
        margin-right: 56px;
    }

    #sous_form {
        width: 900px;
    }

    .bar1 input {
        border: 2px solid #7BA7AB;
        border-radius: 5px;
        background: #F9F0DA;
        color: #9E9C9C;
        outline:none;
    }

    .bar1 button {
        top: 0;
        right: 0;
        background: #7BA7AB;
        border-radius: 0 5px 5px 0;
    }

    .bar1 button:before {
        content: "\f002";
        font-family: FontAwesome;
        font-size: 16px;
        color: #F9F0DA;
    }
    label {
        font-weight: bold;
        font-size: 20px;
    }
    #tr_text td{
        font-weight: bold;
    }
    #price-tab{
        margin-top: 15px;
        background: #f8f9fa;
    }
    #upd_btn {
        background: orange;
        height: 38px;
        width: 72px;
        border-radius: 10px;
        cursor: pointer;
        color: #FBFBFB;
    }
    #export_btn{
        width: 85px;
        height: 38px;
        color: white;
        background: #f58f98;
    }
    #upd_btn2{
        width: 85px;
        height: 38px;
        color: white;
        background: #f58f98;
    }
    #top_div a{
        width: 85px;
        height: 38px;
        color: white;
        background: #FF5722;
        margin-left: 25px;
    }
    #importExcel_form{
        display: inline-block;
    }
</style>
<body>
<div id="infoContent">
    <div class="container-fluid">
        <!--   row   一行  -->
        <div class="row">
            <div class="col-xl-12" id="top_div">
                <div class="search bar1">
                    <form id="sous_form">
                        <label>货物名称：</label>
                        <input id="itemsName" name="itemsName" type="text" placeholder="按货物名称搜索...">
                        <button id="sous_btn" type="button" @click="search"></button>
                    </form>
                </div>

                <button type="button" id="add_btn" @click="add">
                    添加
                </button>
                <button type="button" id="del_btn" @click="del">删除</button>
                <a class="btn btn-warning" href="../../Info/exportExcel">导出</a>
                <form id="importExcel_form" action="../../Info/importExcel" method="post" enctype="multipart/form-data">
                    <input type="file" name="upFile">
                    <button @click="importExcel" type="submit">上传</button>
                </form>


            </div>
        </div>
    </div>
    <table id="price-tab" class="table table-hover">
        <tr id="tr_text">
            <td><input type="checkbox" id="checkAll" @click="allCheck"></td>
            <td>货物编号</td>
            <td>货物名称</td>
            <td>货物产地</td>
            <td>货物规格</td>
            <td>货物可供数量</td>
            <td>货物采购合同号</td>
            <td>货物加工合同号</td>
            <td>货物运输合同号</td>
            <td>货物入库合同号</td>
            <td>操作</td>
        </tr>
        <!--  page.list  page类的list  -->
        <tr v-for="info in page.list" id="tr_text2">
            <td><input @click="isCheckAll" type="checkbox" :value="info.itemsInfoNo" class="check"></td>
            <td>{{info.itemsInfoNo}}</td>
            <td>{{info.itemsName}}</td>
            <td>{{info.itemsAddress}}</td>
            <td>{{info.itemsScale}}</td>
            <td>{{info.itemsCounts}}</td>
            <td>{{info.itemsOrderNo}}</td>
            <td>{{info.itemsAddNo}}</td>
            <td>{{info.itemsTtranNo}}</td>
            <td>{{info.itemsInStoreNo}}</td>
            <td>
                <!-- 按钮：用于打开模态框-->
                <button id="upd_btn" type="button" data-toggle="modal" data-target="#myModal" class="btn btn-danger modify" @click="updInfo(info)">
                    修改
                </button>
            </td>
        </tr>

    </table>
    <!--无序列表 翻页-->
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="javascript:void(0);" @click="toPage(1)">首页</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);" v-if="page.pageNow>1"
                                 @click="toPage(page.pageNow-1)">{{page.pageNow-1}}</a></li>
        <li class="page-item active"><a class="page-link" href="javascript:void(0);">{{page.pageNow}}</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);" v-if="page.pageNow<page.pageTotal"
                                 @click="toPage(page.pageNow+1)">{{page.pageNow+1}}</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);" @click="toPage(page.pageTotal)">尾页</a>
        </li>
    </ul>
    <!-- 模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">请修改物质明细信息</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- 模态框主体 -->
                <div class="modal-body">
                    <form id="updInfo-form">
                        <input type="hidden" :value="info.itemsInfoNo" name="itemsInfoNo">
                        <label>货物产地：</label>
                        <input id="itemsAddress" class="form-control" type="text" name="itemsAddress"
                               v-model="info.itemsAddress"><br>
                        <label>货物规格：</label>
                        <input id="itemsScale" class="form-control" type="text" name="itemsScale"
                               v-model="info.itemsScale"><br>
                        <label>货物可供数量：</label>
                        <input id="itemsCounts" class="form-control" type="number" name="itemsCounts"
                               v-model="info.itemsCounts"><br>
                        <label>货物采购合同号：</label>
                        <input id="itemsOrderNo" class="form-control" type="text" name="itemsOrderNo"
                               v-model="info.itemsOrderNo"><br>
                        <label>货物加工合同号：</label>
                        <input id="itemsAddNo" class="form-control" type="text" name="itemsAddNo"
                               v-model="info.itemsAddNo"><br>
                        <label>货物运输合同号：</label>
                        <input id="itemsTtranNo" class="form-control" type="text" name="itemsTtranNo"
                               v-model="info.itemsTtranNo"><br>
                        <label>货物入库合同号：</label>
                        <input id="itemsInStoreNo" class="form-control" type="text" name="itemsInStoreNo"
                               v-model="info.itemsInStoreNo"><br>
                    </form>
                </div>
                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button @click="updInfo2" id="upd_btn2">保存修改</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>


</div>

    <script src="../../style/jquery-3.3.1.js"></script>
    <script src="../../style/bootstrap-4.6.0-dist/js/bootstrap.js"></script>
    <script src="../../style/vue.js"></script>
    <script src="../../my1.1.js"></script>
    <script>
        $(function () {
            let page = selInfoTable(1,'');
            let app = new Vue({
                el: '#infoContent',
                data: {
                    page: page,
                    info: {}
                },
                methods: {
                    importExcel:function (){
                        alert("上传成功");
                        location.href='info_list.html';
                    },
                    allCheck: function () {
                        eventHub.$emit('allCheck', null);
                    },
                    isCheckAll: function () {
                        eventHub.$emit('isCheckAll', null);
                    },
                    toPage: function (pageNow) {//当前页
                        let itemsName = $("#itemsName").val();
                        this.page = selInfoTable(pageNow,itemsName);
                    },
                    search: function () {   //在点击事件里边调用
                        //点击搜索按钮，获取搜索内容，进行查询
                        let itemsName = $("#itemsName").val();
                        this.page = selInfoTable(1,itemsName);
                    },
                    add:function (){
                        location.href='info_add.html';
                    },
                    updInfo: function (info) {
                        $('#myModal').modal('show');
                        this.info = info;
                    },
                    updInfo2:function () {
                        //修改员工
                        $.ajax({
                            type: "post",
                            url: "../../Info/updInfo",
                            dataType: "json",
                            data: $("#updInfo-form").serialize(),
                            success: function (data) {
                                //v-model的特性 双向绑定  :value单向绑定
                                //data的值会根据表单（表格）改变，表单也会根据data变化
                                location.href='info_list.html';
                            }
                        })
                    },
                    del: function () {
                        let ids = "";
                        // 获取复选框中的值 id值 使用类选择器each()遍历方法
                        $(".check").each(function () {
                            // 对所有符合该选择器的元素进行操作。this 复选框.value
                            // 判断该复选框是否选中
                            if (this.checked) {
                                ids += this.value + ",";
                            }
                        })
                        // ajax把拼接的id传入到后台
                        $.ajax({
                            type: "post",
                            url: "../../Info/delInfoAll",
                            data: {ids: ids},
                            dataType: "json",
                            success: function (data) {
                                alert(data.message);
                                location.href="info_list.html";
                            }
                        })
                    }

                }
            })
        })

        function selInfoTable(pageNow,itemsName) {
            let page;//声明，然后在上边调用
            $.ajax({
                type: "post",
                data: {pageNow: pageNow,itemsName:itemsName},
                url: "../../Info/selInfoTable",
                async: false,
                dataType: "json",
                success: function (json) {
                    page = json; //把json对象赋值给data,然后返回
                }
            })
            return page;
        }
    </script>

</body>
</html>